<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>计时器</title>
    <link rel="stylesheet" href="./font/iconfont.css">
	<link href="../css/mui.css" rel="stylesheet" />
    <style>
        /* 统一去除外边距和内边距 */
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #2C3E50;
        }

        /* 给操作内容区域添加css */
        .wrapper {
            height: 50%;
            width: 100%;
            text-align: center;
            margin-top: 200px;
            box-sizing: border-box;
        }

        /* 给时间显示区域添加css */
        #mytime {
            color: #fff;
            display: block;
            font-size: 70px;
        }

        .flex {
            display: flex;
            justify-content: space-between;
            margin: 0 12.5rem 0 12.5rem;
            box-sizing: border-box;
        }

        /* 给button添加css样式 */
        .button {
            height: 150px;
            width: 150px;
            background-color: #fff;
            font-size: 40px;
            font-weight: 600;
            color: #3c3c3c;
            border-radius: 50%;
            outline: none;
            margin-top: 200px;
            box-sizing: border-box;
        }

        /* 给button的字体添加css样式 */
        .button>span {
            display: block;
            font-size: 30px;
        }

        /* 给时间显示区域的字体添加css样式 */
        .white {
            color: #fff;
            font-size: 70px;
        }

        /* 给用时两字添加覆盖css */
        .size {
            font-size: 30px;
        }

        /* 设置stop按钮为隐藏 */
        button#stop {
            display: none;
        }

        button#start {
            margin: 200px auto;
        }

        /* 设置reset按钮为隐藏 */
        button#reset {
            display: none;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <!-- 小时钟iconfont字体 -->
        <span class="iconfont icon-shizhong white"></span>
        <!-- 显示时间区域 -->
        <h1 id=mytime>00:00:00</h1>
        <!-- 文字描述 -->
        <p class="white size">用时</p>
		<!--运动类型-->
		<p class="white size" id="sport_type">运动类型</p>
        <div class="flex">
            <!-- 暂停按钮 -->
            <button id="stop" class="button" name="button" >
                <span class="iconfont icon-zantingtingzhi"></span>暂停
            </button>
            <!-- 开始按钮 -->
            <button id="start" class="button" name="button" >
                <span class="iconfont icon-jixu"></span>开始
            </button>
			<button type="button" class="button">1234</button>
            <!-- 结束按钮 -->
            <button id="reset" class="button" name="button" >
                <span class="iconfont icon-jieshu"></span>结束
            </button>
        </div>
    </div>
</body>
<script src="../js/mui.js"></script>
<script src="../js/app.js"></script>
<script type="text/javascript">
	mui.plusReady(function () {
	    var self = plus.webview.currentWebview();
		var type = self.type;
		console.log(type);
		var sport_type = document.getElementById("sport_type");
		sport_type.innerHTML = type;
		var btnStart = document.getElementById("start");
		var btnStop = document.getElementById("stop");
		var btnReset = document.getElementById("reset");
		
		btnStart.addEventListener("tap",function(){
			time = setInterval(timer, 1000);
			// 当点击start按钮后对样式做出改动，让其他按钮显示
			
			btnStart.style.display = "none";
			btnReset.style.display = "block";
			btnStop.style.display = "block";
		});
		btnStop.addEventListener("tap",function(){
			 clearInterval(time);
			// 当点击stop按钮后对样式做出改动，让start按钮显示
			
			btnStart.style.display = "block";
			btnStart.innerHTML = "继续";
			btnReset.style.display = "none";
			btnStop.style.display = "none";
		});
		btnReset.addEventListener("tap",function(){
			 clearInterval(time);
			// 当点击reset按钮后对样式做出改动，让start按钮显示
			btnStart.style.display = "block";
			btnStart.innerHTML = "开始";
			btnReset.style.display = "none";
			btnStop.style.display = "none";
			var nowDate = app.getNowDate();
			var nowTime = app.getNowTime();
			
			mui.ajax(app.serverUrl+'/sport/insert',{
				data:{
					type:type,
					day:nowDate,
					total:total,
					endtime:nowTime,
					uid:app.getUserGlobal().id
				},
				dataType:'json',//服务器返回json格式数据
				type:'post',//HTTP请求类型
				timeout:10000,//超时时间设置为10秒；
				success:function(data){
					mui.toast("上传成功");
				},
				error:function(xhr,type,errorThrown){
					mui.toast("上传失败");
					console.log(errorThrown);
				}
			});
			
		});
		
	})
    var h = m = s = 0;  //定义时，分，秒，毫秒并初始化为0；
    var time = 0;
	var total = 0;
    function timer() {   //定义计时函数
        s = s + 1;
		total = total+1;
        if (s >= 60) {
            s = 0;
            m = m + 1;        //分钟
        }
        if (m >= 60) {
            m = 0;
            h = h + 1;        //小时
        }
        str = toDub(h) + ":" + toDub(m) + ":" + toDub(s);
        mytime = document.getElementById('mytime');
        mytime.innerHTML = str;
    }

    function toDub(n) {  //补0操作
        if (n < 10) {
            return "0" + n;
        }
        else {
            return "" + n;
        }
    }

</script>

</html>